<!DOCTYPE html>
  <body>
    <a href="http://www.test.com" style="position: absolute; left: 20px; top: 20px; width: 200px;">A link to highlight</a>
    <div style="background-color: white; position: absolute; left: 20px; top: 40px; width: 200px; height: 30px; transform:translateZ(0);">
      <p id="innerDiv">Not a link to click.</p>
    </div>
    <div style="background-color: white; position: absolute; left: 20px; top: 100px; width: 200px; height: 100px; overflow-y: scroll; overflow-x : scroll;">
        <a href="http://www.test.com">Another link to click</a><br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
        Some stuff.<br>
    </div>
    <!-- Don't highlight if no hand cursor. -->
    <a href="http://www.test.com" style="position: absolute; left: 20px; top: 220px; width: 200px; cursor: crosshair;">A link to *not* highlight</a>
    <div style="position: absolute; left: 20px; top: 260px; width: 200px;">
        <input type="text"> <!-- This will have an I-beam cursor. -->
    </div>
    <style>
      #multicol { position: absolute; left: 20px; top: 300px; width: 400px; height: 50px; columns: 2; column-fill: auto; }
    </style>
    <div id="multicol">
      <a href="http://www.test.com">
        <div style="display: inline-block; width: 200px; height: 25px">Link part 1</div>
        <div style="display: inline-block; width: 200px; height: 25px">Link part 2</div>
        <div style="display: inline-block; width: 200px; height: 25px">Link part 3</div>
      </a>
    </div>
    <div style="position: absolute; left: 20px; top: 400px">
      <div id="display-contents" style="display: contents; cursor: pointer">Contents</div>
    <div>
  </body>
</html>
